import React, { ReactNode, useEffect } from "react";
import { useState } from 'react';
import styles from './index.module.less'
import top from '@/assets/top.png'

interface PageWrapperProps {
    children: ReactNode,
}

const PageWrapper: any = (props: PageWrapperProps) => {
    const { children } = props
    const screenWidth = window.screen.width
    const screenHeight = window.screen.height

    const [scale, setScale] = useState<number>(1)
    // console.log((screenWidth / screenHeight) * document.body.offsetHeight)
    const getScale = () => {

        const w = document.body.offsetWidth
        const h = document.body.offsetHeight
        const wh = h / screenHeight;
        const ww = w / screenWidth;

        setScale(ww < wh ? ww : wh)
    }
    const debounce = (fn: () => void, delay: number) => {
        const delays = delay || 500;
        let timer: null;
        return function () {
            const args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                timer = null;
                fn(args)
            }, delays);
        };
    }
    useEffect(() => {
        getScale()
        window.addEventListener('resize', (e) => {
            debounce(getScale(), 300)
        })
    }, [])

    return (
        <>
            <div className={styles.container} style={{ '--scale': scale, }}>
                <img src={top} alt="" width='100%' />
                <div className={styles.content}>
                    {children}
                </div>
            </div>
        </>
    )
}

export default PageWrapper